<template>
	<view>
		<view class="stall" v-for="(item,index) in stall" :key="index">
			<view class="stallNum">
				{{item.park_num}}
			</view>
			<view class="position">
				{{item.position}}
			</view>
		</view>
		<u-button type="primary" class="button" @click="gotoaddVip">
			<u-icon name="plus"></u-icon>
			申请车位
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stall: []
			}
		},
		methods: {
			getStall() {
				this.$u.api.getStallVip().then(res => {
					this.stall = res.data
					console.log(res)
				})
			},
			gotoaddVip() {
				console.log(11)
				this.$u.route('pages/stall/addVip')
			}
		},
		onShow() {
			this.getStall()
		},
		onPullDownRefresh() {
			this.getStall()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: $page-color;
	}

	.stall {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		height: 200rpx;
		margin: 20rpx 10%;
		font-size: 32rpx;
		font-weight: bold;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.button {
		width: 80%;
		height: 100rpx;
		margin-top: 40rpx;
		font-size: 36rpx;
	}
</style>
